<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>管理入口-地图</title>
	
	<%@ include file="../common.jsp"%>
	<script type="text/javascript" src="${path }/static/mapService/js/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="${path }/static/mapService/js/pmap.js"></script>
	<script type="text/javascript" src="${path }/static/mapService/js/mapInfo.js"></script>
	<script type="text/javascript" src="${path }/static/mapService/js/raphael-min.js"></script>
	<script type="text/javascript" src="${path }/static/vender/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${path }/static/js/mustache.min.js"></script>
	
	<style type="text/css">
		#maptools{border:solid 1px #E4E4E4;float:right;padding-left:0px;border:none;margin-right:10px;position:absolute;right:0px;z-index:99999;}
		.mapbtn{position:relative;float:right;margin:2px;}
		#bt1{border-radius:0;box-shadow:0 0 8px gray;border:solid 1px #b3b3b3;}
		#map_info{position:absolute;z-index:9999}
	</style>
</head>

<body>
	<jsp:include page="${pagePath }/header.jsp">
		<jsp:param value="1" name="active" />
	</jsp:include>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<jsp:include page="../data/left_navbar.jsp">
					<jsp:param value="9" name="active"/>
				</jsp:include>
			</div>

			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
			<h3 class="page-header">地图定位</h3>
				<div class="row">
					<div class="col-sm-12">
						<label class="form-inline">MAC: 
							<input type="text" class="form-control" name="deviceMac" id="deviceMac" style="width: 170px;" placeholder="如08-D4-0C-47-1A-4E">
						</label> 
						&emsp;&emsp;
						<!-- 
		                <label class="form-inline">采集点: 
							<select class="form-control" name="deviceNo" id="deviceNo">
								<option value="">选择采集点</option>
							</select>
						</label>
						&emsp;&emsp; 
						 -->
						<label class="form-inline">开始时间: 
							<input name="startTime" id="startTime" type="text" class="form-control" style="width: 160px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly />
						</label> 
						&emsp;&emsp; 
						<label class="form-inline">结束时间: 
							<input name="endTime" id="endTime" type="text" class="form-control" style="width: 160px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly />
						</label>
						&emsp;&emsp; 
						<button type="button" class="btn btn-info" onclick="getMacLocation();">&nbsp;检索&nbsp;</button>
						<button type="button" class="btn btn-info" onclick="clearMap();">&nbsp;清除&nbsp;</button>
					</div>
				</div>
				
				<div class="row">
					<div class="col-md-9">
						<div id="map" style="position: relative; left: 0px; width: 100%; height: 100%; min-height: 600px; margin: 0px auto; z-index: 1;margin-top: 0px;">
						</div>
					</div>
					<div class="col-md-3" style="padding:0px;margin-left:-10px;">
						<div class="table-responsive" style="max-height:600px;overflow:auto;">
							<table class="table table-striped">
								<thead>
									
								</thead>
								<tbody id="listInfo">
									<tr>
										<td>请检索</td>
										<td>请检索</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!-- 地图 -->
				
				<div id="map_info" style="display:none;">
					<ul  class="list-group" style="width:230px">
						<li id="map_info_1" class="list-group-item"></li>
						<li id="map_info_2" class="list-group-item"></li>
						<li id="map_info_3" class="list-group-item"></li>
					</ul>
				</div>

			</div>

		</div>
	</div>

	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>
	
	<script id="tpl4table" type="x-tmpl-mustache">
		{{#listData}}
		<tr>
			<td>{{index}}</td>
            <td>{{inTime}}    <a href="javascript:void(0);" onclick="addMac('{{id}}','{{longitude}}','{{latitude}}');drawLine('{{longitude}}','{{latitude}}');"><span class="glyphicon glyphicon-map-marker"></span></a></td>
		</tr>
		{{/listData}}
	</script>

	<script type="text/javascript">
		var map;
		var macInfoArray;
		$(document).ready( function() {
			map = new EzMap("map");
			map.centerAndZoom(new Point(121.58433, 31.18665), 18);
			var defaultDate = new Date(new Date());
			var startTimeDefault = new Date;
			startTimeDefault.setHours(startTimeDefault.getHours () - 1);
			$("#endTime").val(defaultDate.format("yyyy-MM-dd hh:mm:ss"));
			$("#startTime").val(startTimeDefault.format("yyyy-MM-dd hh:mm:ss"));
		});
		
		function clearMap() {
			map.clear();
			temp_str_old="";
		}
		
		//从后台读取设备信息
		function getMacLocation(){
			var deviceMac = $("#deviceMac").val();
			//var deviceNo = $("#deviceNo").val();
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			$.ajax({
				type:"post",
				url:"${path }/map/getMacLocation",
				data: {
					"deviceMac" : deviceMac,
					"deviceNo" : "",
					"startTime" : startTime,
					"endTime" : endTime
		        },
				success:function(data){
					$("#listInfo").empty();
					//用array保存mac数组对象
					if(data.totalCount > 0){
						macInfoArray = data.listInfo;
						var listInfo = [];
						$.each(data.listInfo, function(i, item){
							var index = 1 + parseInt(i);
							var obj = {"index":index , "inTime" : dateForm(item.inTime) , "id" : item.id , "longitude" : item.longitude , "latitude" : item.latitude };
							listInfo.push(obj);
						});	
						
						var list = new Object();
						list.listData = listInfo;
						var template = $('#tpl4table').html();
						Mustache.parse(template); 
						var htmlStr= Mustache.render(template, list);
						$("#listInfo").append(htmlStr);
						
					} else {
						$("#listInfo").append("<tr><td>暂无数据</td><td>暂无数据</td></tr>");
					}
					
				},
				error : function(error) {
					alert("getAllDevices 错误代码："+error.status+"。"+"错误内容:"+error.statusText+"。");
				}
			});
		}

		function addMac(id,longitude,latitude) {
			if(null != longitude && null != latitude) {
				var pIcon=new Icon();
				pIcon.image="../static/mapService/images/icon/location.png";
				pIcon.height=30;
				pIcon.width=22;
				var ptitle=null;
				if(id!=null)
					ptitle= new Title(id,14,7,"宋体","blue","white","gray",1);
				var pmarker=new Marker(new Point(longitude,latitude),pIcon,ptitle);
				//pmarker.showTitle();
				//pmarker.disableEdit();
				pmarker.addListener("mouseover",macInfo_onfocus);
				pmarker.addListener("mouseout",macInfo_release);
				//添加事件
				map.addOverlay(pmarker);
				newAddress(longitude,latitude);
				//pmarker.disableEdit();
			}
		}
		
		function macInfo_onfocus(e) {
			e = e || window.event;
			for(var i=0;i<macInfoArray.length;i++) {		
				if(e.srcElement.name==macInfoArray[i].id) {
					$("#map_info").show()
					$("#map_info").css("left",lng_to_x(macInfoArray[i].longitude,map_current_layer)+$("#map").offset().left-250);
					$("#map_info").css("top",(lat_to_y(macInfoArray[i].latitude,map_current_layer)+$("#map").offset().top-80));		
					$("#map_info_1").html("MAC："+macInfoArray[i].mac);
					$("#map_info_2").html("捕获设备："+macInfoArray[i].deviceName);
					$("#map_info_3").html("时间："+dateForm(macInfoArray[i].inTime));
					return;
				}
			}
		}

		function macInfo_release(e) {
			e = e || window.event;
			for(var i=0;i<macInfoArray.length;i++) {		
				if(e.srcElement.name==macInfoArray[i].id)
				{
					$("#map_info").hide()
					return;
				}
			}
		}
	
		var temp_str_old="";
		var colorList = ["#FF0000","#0000E3","#F00078","#AE00AE","#02C874","#548C00","#FF8000"]; 
		//轨迹描绘
		function drawLine(longitude,latitude){
			if(temp_str_old){
				temp_str = temp_str_old + "," + longitude +","+ latitude;
			} else {
				temp_str = longitude +","+ latitude;
			}
			temp_str_old = longitude +","+ latitude;
			var pPolyline=new Polyline(temp_str,colorList[Math.floor(Math.random()*7)],3,1,1);
			title_onDrawMode.setName("drawLine");
			rap.add_overlay(pPolyline);
		}
		
		//定位设置
		function newAddress(longitude,latitude){
			map.centerAndZoom(new Point(longitude,latitude), 18);
		}
	</script>
</body>
</html>